import { View } from '@tarojs/components'
import F2Canvas from 'taro-f2-react'
import { Chart, Interval, Axis, TextGuide } from '@antv/f2'

interface IStripChartsProps {
  id?: string
  data?: any[]
  fontSize?: number
  color?: any
}

const dataMap = [
  {
    label: '内向',
    flag: true,
    value: 'no1',
    value1: 'no1'
  },
  {
    label: '外向',
    flag: false,
    value: 'no1',
    value1: 'no1'
  },
  {
    label: '直觉',
    flag: true,
    value: 'no2',
    value1: 'no2'
  },
  {
    label: '感觉',
    flag: false,
    value: 'no2',
    value1: 'no2'
  },
  {
    label: '情感',
    flag: true,
    value: 'no3',
    value1: 'no3'
  },
  {
    label: '思考',
    flag: false,
    value: 'no3',
    value1: 'no3'
  },
  {
    label: '知觉',
    flag: true,
    value: 'no4',
    value1: 'no4'
  },
  {
    label: '判断',
    flag: false,
    value: 'no4',
    value1: 'no4'
  }
]

const IStripChartsIndex: React.FC<IStripChartsProps> = props => {
  const { id, data = [], fontSize = 12 } = props

  const sourceData =
    data
      ?.map(item => {
        const res = dataMap.find(dataItem => dataItem.label === item.name)
        return {
          ...item,
          ...res,
          score: res!.flag
            ? parseInt(item.score as string)
            : -parseInt(item.score as string)
        }
      })
      .reverse() || []

  return (
    <View style={{ width: '100%', height: '260px' }} className='chart_body'>
      {sourceData.length > 0 ? (
        <F2Canvas id={id}>
          <Chart
            data={sourceData}
            coord={{
              transposed: true
            }}
          >
            <Axis
              field='value'
              style={{ label: { fontSize } }}
              formatter={value => {
                const res = sourceData.find(
                  item => item.value1 === value && item.flag == false
                )
                return `${res.label} (${res.type})`
              }}
            />
            <Axis
              field='value1'
              style={{ label: { fontSize } }}
              position='right'
              formatter={value => {
                const res = sourceData.find(
                  item => item.value1 === value && item.flag == true
                )
                return `${res.label} (${res.type})`
              }}
            />
            <Axis
              field='score'
              tickCount={7}
              ticks={[-100, -70, -30, 0, 30, 70, 100]}
              formatter={value => {
                return Math.abs(value)
              }}
            />

            {/* 
            <Interval
              x='value'
              y='score'
              adjust='stack'
              color='l(180) 0:#35417d 1:#7c86b4'
            />
            <Interval
              x='value1'
              y='score'
              color='l(180) 0:#35417d 1:#7c86b4'
              adjust='stack'
            /> */}

            <Interval
              x='value'
              y='score'
              adjust='stack'
              color='l(180) 0:#7c86b4 0.95:#7c86b4 1:#ffffff'
              size={16}
            />
            <Interval
              x='value1'
              y='score'
              color='l(180) 0:#7c86b4 0.95:#7c86b4 1:#ffffff'
              adjust='stack'
              size={16}
            />
            {sourceData.map(item => {
              return (
                <TextGuide
                  key={item.type}
                  records={[item]}
                  onClick={ev => {}}
                  content={Math.abs(item.score)}
                  style={{
                    fill: '#566092',
                    fontSize: '24px'
                  }}
                  offsetY={-20}
                  // offsetX={item.flag ? 10 : -10}
                  offsetX={-20}
                />
              )
            })}
          </Chart>
        </F2Canvas>
      ) : null}
    </View>
  )
}

export default IStripChartsIndex
